<!--
 * @Descripttion: unTitle
 * @Author: yizheng.yuan
 * @Date: 2021-10-28 21:52:54
 * @LastEditors: yizheng.yuan
 * @LastEditTime: 2021-11-04 18:12:45
-->
<template>
  <div class="wrapper flexBox-c">
    <div class="head">
      <div class="iconBox"><van-icon name="cross" /></div>
      <div class="head_main">高唐县市场管理局</div>
      <div class="iconBox"><van-icon name="ellipsis" /></div>
    </div>
    <div class="main" id="article">
      <div class="main-inner">
        <div class="text-c mg-tb10">
          <button class="tip_btn">
            投诉须知
          </button>
        </div>
        春天的江潮水势浩荡，与大海连成一片，一轮明月从海上升起，好像与潮水一起涌出来。月光照耀着春江，随着波浪闪耀千万里，所有地方的春江都有明亮的月光！江水曲曲折折地绕着花草丛生的原野流淌，月光照射着开遍鲜花的树林好像细密的雪珠在闪烁。月色如霜，所以霜飞无从觉察，洲上的白沙和月色融合在一起，看不分明。江水、天空成一色，没有一点微小灰尘，明亮的天空中只有一轮孤月高悬空中。江边上什么人最初看见月亮？江上的月亮哪一年最初照耀着人？人生一代代地无穷无尽，只有江上的月亮一年年地总是相像。不知江上的月亮等待着什么人，只见长江不断地一直运输着流水。游子像一片白云缓缓地离去，只剩下思妇站在离别的青枫浦不胜忧愁。哪家的游子今晚坐着小船在漂流？什么地方有人在明月照耀的楼上相思？可怜楼上不停移动的月光，应该照耀着离人的梳妆台。月光照进思妇的门帘，卷不走，照在她的捣衣砧上，拂不掉。这时互相望着月亮可是互相听不到声音，我希望随着月光流去照耀着您。鸿雁不停地飞翔，而不能飞出无边的月光，月照江面，鱼龙在水中跳跃，激起阵阵波纹。昨天夜里梦见花落闲潭，可惜的是春天过了一半自己还不能回家。江水带着春光将要流尽，水潭上的月亮又要西落。斜月慢慢下沉，藏在海雾里，碣石与潇湘的离人距离无限遥远。不知有几人能趁着月光回家，唯有那西落的月亮摇荡着离情，洒满了江边的树林。
        春天的江潮水势浩荡，与大海连成一片，一轮明月从海上升起，好像与潮水一起涌出来。月光照耀着春江，随着波浪闪耀千万里，所有地方的春江都有明亮的月光！江水曲曲折折地绕着花草丛生的原野流淌，月光照射着开遍鲜花的树林好像细密的雪珠在闪烁。月色如霜，所以霜飞无从觉察，洲上的白沙和月色融合在一起，看不分明。江水、天空成一色，没有一点微小灰尘，明亮的天空中只有一轮孤月高悬空中。江边上什么人最初看见月亮？江上的月亮哪一年最初照耀着人？人生一代代地无穷无尽，只有江上的月亮一年年地总是相像。不知江上的月亮等待着什么人，只见长江不断地一直运输着流水。游子像一片白云缓缓地离去，只剩下思妇站在离别的青枫浦不胜忧愁。哪家的游子今晚坐着小船在漂流？什么地方有人在明月照耀的楼上相思？可怜楼上不停移动的月光，应该照耀着离人的梳妆台。月光照进思妇的门帘，卷不走，照在她的捣衣砧上，拂不掉。这时互相望着月亮可是互相听不到声音，我希望随着月光流去照耀着您。鸿雁不停地飞翔，而不能飞出无边的月光，月照江面，鱼龙在水中跳跃，激起阵阵波纹。昨天夜里梦见花落闲潭，可惜的是春天过了一半自己还不能回家。江水带着春光将要流尽，水潭上的月亮又要西落。斜月慢慢下沉，藏在海雾里，碣石与潇湘的离人距离无限遥远。不知有几人能趁着月光回家，唯有那西落的月亮摇荡着离情，洒满了江边的树林。
        春天的江潮水势浩荡，与大海连成一片，一轮明月从海上升起，好像与潮水一起涌出来。月光照耀着春江，随着波浪闪耀千万里，所有地方的春江都有明亮的月光！江水曲曲折折地绕着花草丛生的原野流淌，月光照射着开遍鲜花的树林好像细密的雪珠在闪烁。月色如霜，所以霜飞无从觉察，洲上的白沙和月色融合在一起，看不分明。江水、天空成一色，没有一点微小灰尘，明亮的天空中只有一轮孤月高悬空中。江边上什么人最初看见月亮？江上的月亮哪一年最初照耀着人？人生一代代地无穷无尽，只有江上的月亮一年年地总是相像。不知江上的月亮等待着什么人，只见长江不断地一直运输着流水。游子像一片白云缓缓地离去，只剩下思妇站在离别的青枫浦不胜忧愁。哪家的游子今晚坐着小船在漂流？什么地方有人在明月照耀的楼上相思？可怜楼上不停移动的月光，应该照耀着离人的梳妆台。月光照进思妇的门帘，卷不走，照在她的捣衣砧上，拂不掉。这时互相望着月亮可是互相听不到声音，我希望随着月光流去照耀着您。鸿雁不停地飞翔，而不能飞出无边的月光，月照江面，鱼龙在水中跳跃，激起阵阵波纹。昨天夜里梦见花落闲潭，可惜的是春天过了一半自己还不能回家。江水带着春光将要流尽，水潭上的月亮又要西落。斜月慢慢下沉，藏在海雾里，碣石与潇湘的离人距离无限遥远。不知有几人能趁着月光回家，唯有那西落的月亮摇荡着离情，洒满了江边的树林。
      </div>
    </div>
    <div style="padding-bottom: 30px">
        <button class="sub_btn2" @click="sureFun">同意<span>({{second}}s)</span></button>
      </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data(){
    return{
      second: 5,
      isBottom: false,
    }
  },
  mounted(){
    let interId = setInterval(()=>{
      let timeId;
      if(this.second === 1){
        window.clearInterval(interId)
        return
      }else{
        timeId = setTimeout(()=>{
        this.second -=1;
        window.clearTimeout(timeId);
      },1000)
      }
      
    },1000)
    let that = this;
    let article = document.getElementById('article');
    console.log('article.scrollHeight',article.scrollHeight, article.clientHeight);
    article.onscroll = function(){
      console.log(article.scrollTop,article.clientHeight,article.scrollHeight);
    　　if(article.scrollTop + article.clientHeight + 20 > article.scrollHeight){
          that.isBottom = true;
          Toast(`到底了:${article.scrollTop},${article.clientHeight},${article.scrollHeight}`);
          console.error("已经到最底部了！!",that.isBottom);
    　　}
    };
  },
  methods:{
    sureFun(){
      console.log('this.isBottom',this.isBottom);
      if(!this.isBottom || this.second){
        Toast('阅读完毕才能进入！');
        return
      }
      this.$router.push({
        name: 'home',
      })
    }
  }
}
</script>

<style scoped>
.tip_btn{
  background-color: #c0ddf1;
  width: 120px;
  height: 45px;
  line-height: 45px;
  border-radius: 18px;
  border: none;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #3b6ae0;
}
.main{
  flex: 1;
  border: 1px solid #ddd;
  overflow: auto;
  padding: 10px;
  background-color: #e9edf1;
  text-align: left;
  font-size: 16px;
}
.main-inner{
  border-top: 5px solid #666666;
  border-radius: 5px;
  background-color: #fff;
  padding: 10px;
}
.wrapper{
    height: 100vh;
    width: 100vw;
    background-color: #f4f4f4;
  }
  .head{
    display: flex;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ddd;
    text-align: center;
  }
  .head_main{
    flex: 1;
    font-size: 14px;
    font-weight: bold;
  }
  .iconBox{
    margin: 0 10px;
  }
</style>